<template>
  <div class="container">
      <i class="fas fa-chevron-left" @click="reduce"></i>
      <img class="ads-img" :src="'http://localhost:8000'+img[index].ad_value"  alt="">
      <i class="fas fa-chevron-right" @click="plus"></i>   
  </div>
</template>
<style lang="less" scoped>
@import url('../style/mixin.less');
.container{
    width: 600px;
    height: 330px;
    .On-xs({
        width: 100%;
        height: 180px;
    });
    .ads-img{
        width: 520px;
        height: 330px;
        float: left;
        .On-xs({
            width: calc(100% - 70px);
            height: 180px;
        });
    }
    .fas{
        float: left;
        font-size: 26px;
        line-height: 330px;
        padding-left: 25px;
        padding-right: 0;
        width: 15px;
        &:first-child{
            padding-right: 25px;
            padding-left: 0;            
        }
        .On-xs({
            font-size: 14px;
            line-height: 180px;
            padding-left: 7px;
            padding-right: 20px;
            width: 8px;
            &:first-child{
            padding-right: 7px;
            padding-left: 20px;            
            }
        });
    }
}
</style>

<script>
export default {
    data() {
      return {
        index: 0
      }
    },
  props:{
      img:{
          required: true
      }
  },
  methods: {
      plus: function () {
        if (this.index < this.img.length - 1) {
          this.index++
        } else {
          this.index = 0
        }
        this.$emit('change',this.index)
      },
      reduce: function () {
        if (this.index >0 ) {
          this.index--
        } else {
          this.index = this.img.length - 1
        }
        this.$emit('change',this.index)        
      }
    }
}
</script>
